<seed-content id="circle-detail" class=" gray-background">
  <seed-toolbar-header>
    <seed-toolbar-title>{{circle?.circleName|truncate:8}}</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <seed-infinite-scroll (infiniteScroll)="getCircleFeed()">
    <div class="container" *ngIf="circle">
      <header>
        <div class="cover-content" [style.background-image]="'url('+circle.icon+')'">
          <div class="circle-info seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
            <div class="info-content seed-flexbox seed-flexbox-align-center">
              <p>
                <img [src]="circle.icon" alt="" class="circle-logo" seed-load-img [defaultImg]="'circle'">
                <!-- <seed-avatar [userId]="feed.userId" [lazyLoadAvatar]=""></seed-avatar> -->
              </p>
              <div class="circle-basic">
                <h2 class="circle-name">{{circle.circleName| truncate:8}}</h2>
                <div class="members seed-flexbox">
                  <p class="seed-flexbox seed-flexbox-align-center" (click)="downloadAppTip(circle.myCreate)">
                    <i class="member-total">{{dataStore.memberTotal}}</i>人已加入圈子
                    <seed-icons color="c10" name="icon-arrow-right" *ngIf="circle.myCreate"></seed-icons>
                  </p>
                </div>
              </div>
            </div>
            <div class="join-state" (click)="handleCircle()" *ngIf="!circle.myCreate">{{circle.myJoin?'退出':'加入'}}
            </div>
          </div>
        </div>
        <div class="circle-introduce">
          <p class="introduce">{{circle.summarize}}</p>
          <div class="create-info">
            <p class=" seed-flexbox seed-flexbox-align-center">
              <span class="text-ellipsis">创建人：{{circle.createUserName}} </span>
              创建时间：{{circle.createTime| amDateFormat:'YYYY/MM/DD'}}
            </p>
          </div>
        </div>
      </header>

      <div class="content">
        <nav #tab>
          <seed-tab (tabSelect)="getTabIndex($event)">
            <seed-tab-item [title]="'全部帖子'">
              <circle-feed [feeds]="allFeeds" [haveData]="stateStore.haveDataTab[0]" [showMark]="true"
                           [showDel]="circle.myCreate" (remove)="handleFeed($event)"></circle-feed>
            </seed-tab-item>
            <seed-tab-item [title]="'最新回复'">
              <circle-feed [feeds]="latestFeeds" [haveData]="stateStore.haveDataTab[1]" [showMark]="true"
                           [showDel]="circle.myCreate" (remove)="handleFeed($event)"></circle-feed>
            </seed-tab-item>
            <seed-tab-item [title]="'精华'">
              <circle-feed [feeds]="primeFeeds" [haveData]="stateStore.haveDataTab[2]" [showDel]="circle.myCreate"
                           (remove)="handleFeed($event)"></circle-feed>
            </seed-tab-item>
          </seed-tab>
        </nav>
      </div>
    </div>
    <seed-infinite-scroll-content *ngIf="dataStore.noDataTab.indexOf(params.type)=== -1"></seed-infinite-scroll-content>
  </seed-infinite-scroll>
  <div class="create-feed" (click)="downloadAppTip(true)"></div>
</seed-content>
